<template>
  <div class="content">
    <el-dialog
      v-dialogDrag
      title="超领报表"
      model
      :visible.sync="isclientlDialog"
      :close-on-click-modal="false"
      width="60%"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <el-date-picker
          v-model="value1"
          type="daterange"
          align="right"
          size="mini"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          style="width: 268px;margin-right: 5px;"
        />
        <el-button size="mini" type="primary" @click="clientSearch">{{ $t('btn.search') }}</el-button>
      </div>
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        table-height="53vh"
        serial
      />
      <jc-pagination
        v-show="client.total > 0"
        :total="client.total"
        :page.sync="client.pageNum"
        :limit.sync="client.pageSize"
        @pagination="queryTBdCustomerList"
      />
    </el-dialog>
  </div>
</template>
<script>
import picker from '@/components/Search/picker'
import { queryOverCollar } from '@/api/homePage/product'

export default {
  mixins: [picker],
  data() {
    return {
      isclientlDialog: true,
      client: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 200 // 每页显示多少条数据
      },
      value1: [],
      tableData: [],
      tableHeader: [
        { label: this.$t('market.overfulfil'), prop: 'fdate' },
        { label: this.$t('menu.marketManage'), prop: 'fsaleorderno' },
        { label: this.$t('menu.collect'), prop: 'fbillno' },
        { label: this.$t('market.overfulMater'), prop: 'fname' },
        { label: this.$t('market.model'), prop: 'fmodel' },
        { label: this.$t('shop.fnumber1'), prop: 'fnumber' },
        { label: this.$t('shop.fname2'), prop: 'fname' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecification' },
        { label: this.$t('market.mustqty'), prop: 'fmustqty' },
        { label: this.$t('market.realqty'), prop: 'fpickedqty' },
        { label: this.$t('market.overfulqty'), prop: 'factualqty' },
        { label: this.$t('market.overfuldept'), prop: 'departmentName' },
        { label: this.$t('market.picker'), prop: 'fpickerUser' },
        { label: this.$t('market.sendingPeople'), prop: 'fapproverUser' }
      ]
    }
  },
  created() {
    this.queryTBdCustomerList()
  },
  methods: {
    // 获取价格异动
    async queryTBdCustomerList() {
      this.isclientlDialog = true
      const DATA = {
        ...this.client,
        startDate: this.value1?.[0],
        endDate: this.value1?.[1]
      }
      const { data: RES } = await queryOverCollar(DATA)
      this.tableData = RES.list
      this.client.total = RES.total
    },
    clientSearch() {
      this.client.pageNum = 1
      this.queryTBdCustomerList()
    },
    // 关闭前回调
    handleClose() {
      this.$emit('client')
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
}
</style>
